import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { Confidence, EntityLinks, EventTypeBadge, entityHref, entityName, eventLabel } from '@/components/events/event-badge';
import { Note } from '@/components/stats/shared';
import { Container, PageHeader, Section } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, ApiError } from '@/lib/api';
import { fmtAgo, fmtDateTime } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';
import type { EventRow } from '@/lib/types';

export const revalidate = 300;

type Params = Promise<{ id: string }>;

async function load(id: string): Promise<EventRow | null | 'unavailable'> {
  try {
    return (await api.event(id)).data;
  } catch (e) {
    if (e instanceof ApiError && e.notFound) return null;
    return 'unavailable';
  }
}

export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
  const { id } = await params;
  const ev = await load(id);
  const url = `${SITE_URL}/events/${encodeURIComponent(id)}`;
  if (!ev || ev === 'unavailable') return { title: 'Event', alternates: { canonical: url }, robots: { index: false } };
  const title = `${ev.title} — ${eventLabel(ev.type)}`;
  const description = ev.summary ? `${ev.summary.slice(0, 180)}${ev.summary.length > 180 ? '…' : ''}` : `${eventLabel(ev.type)} event detected ${fmtDateTime(ev.event_time)} (source: ${ev.source_name ?? ev.source_id ?? 'unknown'}).`;
  return {
    title,
    description,
    alternates: { canonical: url },
    openGraph: { title: `${title} | ${SITE_NAME}`, description, url, type: 'article', siteName: SITE_NAME, publishedTime: ev.event_time },
    twitter: { card: 'summary_large_image', title: `${title} | ${SITE_NAME}`, description },
  };
}

function Field({ label, children, mono = false }: { label: string; children: React.ReactNode; mono?: boolean }) {
  return (
    <div className="border-t border-rule py-3">
      <p className="eyebrow">{label}</p>
      <div className={`mt-1 text-sm text-ink ${mono ? 'mono break-all' : ''}`}>{children}</div>
    </div>
  );
}

export default async function EventDetailPage({ params }: { params: Params }) {
  const { id } = await params;
  const ev = await load(id);
  if (ev === null) notFound();
  if (ev === 'unavailable') {
    return (
      <Container>
        <PageHeader eyebrow="Event" title="Event" />
        <Unavailable what="Event detail" />
      </Container>
    );
  }
  const entities = ev.entities ?? [];
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Event',
    name: ev.title,
    description: ev.summary ?? undefined,
    startDate: ev.event_time,
    eventStatus: 'https://schema.org/EventScheduled',
    location: { '@type': 'Place', name: 'Earth orbit' },
    url: `${SITE_URL}/events/${encodeURIComponent(ev.id)}`,
  };

  return (
    <Container>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <PageHeader
        eyebrow={
          <span className="inline-flex flex-wrap items-center gap-2">
            <Link href={routes.events()} className="hover:text-accent">Events</Link>
            <span aria-hidden>/</span>
            <EventTypeBadge type={ev.type} />
          </span>
        }
        title={ev.title}
        lede={ev.summary ?? undefined}
      >
        <p className="mono mt-4 text-xs text-ink-3">
          <time dateTime={ev.event_time}>{fmtDateTime(ev.event_time)}</time> · {fmtAgo(ev.event_time)}
          {ev.detected_at && <> · detected {fmtAgo(ev.detected_at)}</>}
        </p>
      </PageHeader>

      <div className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_360px] lg:gap-14">
        <div className="space-y-10">
          <Section eyebrow="Entities" title={`${entities.length} linked ${entities.length === 1 ? 'entity' : 'entities'}`} className="pt-0 md:pt-0">
            {entities.length === 0 ? (
              <Unavailable what="Linked entities" compact />
            ) : (
              <table className="data-table stack text-sm">
                <thead>
                  <tr>
                    <th>Type</th>
                    <th>Entity</th>
                    <th>Relationship</th>
                    <th>NORAD</th>
                  </tr>
                </thead>
                <tbody>
                  {entities.map((e) => {
                    const href = entityHref(e);
                    return (
                      <tr key={`${e.type}-${e.id}`}>
                        <td data-label="Type" className="mono text-xs uppercase text-ink-3">{e.type.replace('_', ' ')}</td>
                        <td data-label="Entity" className="primary">
                          {href ? <Link href={href} className="link font-medium">{entityName(e)}</Link> : <span>{entityName(e)}</span>}
                          {e.type === 'launch' && e.name && <span className="ml-2 text-xs text-ink-3">{e.name}</span>}
                        </td>
                        <td data-label="Relationship" className="text-ink-2">{e.relationship ?? '—'}</td>
                        <td data-label="NORAD" className="mono text-xs">{e.norad_id ?? '—'}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            )}
            <EntityLinks entities={entities} className="mt-3 md:hidden" max={4} />
          </Section>

          <Section eyebrow="Metadata" title="Raw event metadata" className="pt-0 md:pt-0">
            {ev.metadata && Object.keys(ev.metadata).length ? (
              <pre className="mono scrollbar-thin overflow-x-auto rounded-md border border-rule bg-plane p-4 text-xs leading-relaxed text-ink-2">{JSON.stringify(ev.metadata, null, 2)}</pre>
            ) : (
              <Unavailable what="Metadata" compact />
            )}
            <Note className="mt-3">Metadata is stored exactly as produced by the connector that detected the event; keys vary by event type.</Note>
          </Section>
        </div>

        <aside className="lg:sticky lg:top-[calc(var(--header-h)+1rem)] lg:self-start">
          <p className="eyebrow mb-1">Telemetry</p>
          <Field label="Event id" mono>{ev.id}</Field>
          <Field label="Type">
            <EventTypeBadge type={ev.type} size="md" />
            <span className="mono ml-2 text-xs text-ink-3">{ev.type}</span>
          </Field>
          <Field label="Event time" mono>{fmtDateTime(ev.event_time)}</Field>
          {ev.detected_at && <Field label="Detected at" mono>{fmtDateTime(ev.detected_at)}</Field>}
          <Field label="Source">
            {ev.source_url ? (
              <a href={ev.source_url} target="_blank" rel="noopener noreferrer" className="link">{ev.source_name ?? ev.source_id}</a>
            ) : (
              <span>{ev.source_name ?? ev.source_id ?? 'Unavailable'}</span>
            )}
            {ev.source_id && <span className="mono ml-2 text-xs text-ink-3">{ev.source_id}</span>}
          </Field>
          <Field label="Confidence">
            <Confidence value={ev.confidence} className="text-base" />
            <span className="ml-2 text-xs text-ink-3">
              derived · <Link href={routes.methodology()} className="hover:text-accent">methodology</Link>
            </span>
          </Field>
          <div className="border-t border-rule pt-3">
            <Link href={routes.events(`type=${encodeURIComponent(ev.type)}`)} className="text-sm text-accent hover:underline">All {eventLabel(ev.type).toLowerCase()} events →</Link>
          </div>
        </aside>
      </div>
    </Container>
  );
}